<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="../vue.js"></script>
    <h1 align="center">props传值</h1>
    <div id="app">
      <my-parent name="title01"></my-parent>
    </div>
    <script>
      const Feature = Vue.component("my-parent", {
        props: ["name"],
        template: "<div>我是父组件{{name}}</div>",
      });
      new Vue({
        el: "#app",
      });
    </script>
    <hr color="blue" />

    <h1 align="center">$emit传值</h1>
    <!-- 定义一个父组件parent -->
    <div id="app2">
      <parent></parent>
    </div>
    <!--定义一个样板 -->
    <template id="child">
      <div>
        <button @click="click">Send</button>
        <input type="text" name="" id="" v-model="message" />
      </div>
    </template>

    <script>
      Vue.component("parent", {
        template:
          '<div><child @children="transContent">子组件的消息{{message}}</child></div>',
        data() {
          return {
            message: "",
          };
        },
        methods: {
          transContent(payload) {
            this.message = payload;
          },
        }, //定义子组件
      });

      Vue.component("child", {
        template: "#child",
        data() {
          return {
            message: "子组件的消息",
          };
        },
        methods: {
          click() {
            this.$emit("children", this.message);
          },
        },
      });
      new Vue({
        el: "#app2",
      });
    </script>
  </body>
</html>
